<template>
  <div>
    <div>
      <el-form style="text-align: left" :model="searchMsg" status-icon :inline="true" ref="searchFrom"
               label-width="100px" class="demo-form-inline">
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="searchMsg.egname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="etoname">
          <el-input v-model="searchMsg.etoname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="快递单日期" prop="createtime">
          <el-date-picker
              v-model="searchMsg.createtime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="物流状态" prop="estatu">
          <el-radio v-model="searchMsg.estatu" label="1">已发货</el-radio>
          <el-radio v-model="searchMsg.estatu" label="2">已揽件</el-radio>
          <el-radio v-model="searchMsg.estatu" label="3">在途</el-radio>
          <el-radio v-model="searchMsg.estatu" label="4">已收货</el-radio>
          <el-radio v-model="searchMsg.estatu" label="5">退回</el-radio>
        </el-form-item>
        <br>
        <el-form-item style="margin-left:  500px">
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="restSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
        ref="multipleTable"
        :data="expressMsgs"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
      <el-table-column
          prop="enub"
          label="快递单号"
          width="200"
          fixed
      >
      </el-table-column>
      <el-table-column
          prop="egname"
          label="商品名称"
          width="140"
      >
      </el-table-column>
      <el-table-column
          prop="egnub"
          label="商品数量"
          width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.egnum }}个
        </template>
      </el-table-column>
      <el-table-column
          prop="efromaddress"
          label="发货地址"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="etoaddress"
          label="收货地址"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="创建时间"
          width="180"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-table-column>
      <el-table-column
          label="快递状态"
          width="100"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.estatu===1">
            <el-tag>已发货</el-tag>
          </div>
          <div v-if="scope.row.estatu===2">
            <el-tag type="success">已揽件</el-tag>
          </div>
          <div v-if="scope.row.estatu===3">
            <el-tag type="success">在途</el-tag>
          </div>
          <div v-if="scope.row.estatu===4">
            <el-tag type="success">收货</el-tag>
          </div>
          <div v-if="scope.row.estatu===5">
            <el-tag type="danger">退回</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200px"
      >
        <template slot-scope="scope">
          <div>
            <el-button @click="popAllMsg(scope.row)" type="primary" size="small">查看详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    查看详情的弹窗-->
    <el-dialog
        title="详情"
        :visible.sync="msgFlag"
        width="70%"
    >
      <el-descriptions class="margin-top" title="快递详细信息" :column="4" direction="vertical" border>
        <el-descriptions-item label="订单UID">{{  detailMsg.ouid }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ detailMsg.egname }}</el-descriptions-item>
        <el-descriptions-item label="快递单UID">{{ detailMsg.enub }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailMsg.createtime }}</el-descriptions-item>
        <el-descriptions-item label="发货人">{{ detailMsg.efromname }}</el-descriptions-item>
        <el-descriptions-item label="发货人电话">{{ detailMsg.efromphone }}</el-descriptions-item>
        <el-descriptions-item label="发货人地址">{{ detailMsg.efromaddress }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ detailMsg.etoname }}</el-descriptions-item>
        <el-descriptions-item label="收货人电话">{{ detailMsg.etophone }}</el-descriptions-item>
        <el-descriptions-item label="收货人地址">{{ detailMsg.etoaddress }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detailMsg.emsg }}</el-descriptions-item>
        <el-descriptions-item label="快递状态">
          <div v-if="detailMsg.estatu===1"><el-tag>已经发货</el-tag></div>
          <div v-if="detailMsg.estatu===2"><el-tag>已经揽件</el-tag></div>
          <div v-if="detailMsg.estatu===3"><el-tag>在途</el-tag></div>
          <div v-if="detailMsg.estatu===4"><el-tag type="success">已经收货</el-tag></div>
          <div v-if="detailMsg.estatu===5"><el-tag type="danger">退回</el-tag></div>
        </el-descriptions-item>

        <el-descriptions-item label="处理流程" >
          <div v-if="this.detailMsg.serExpressStatu!=null && this.detailMsg.serExpressStatu.length>0">
            <el-timeline :reverse="false">
              <el-timeline-item
                  v-for="(activity, index) in detailMsg.serExpressStatu"
                  :key="index"
                  :timestamp="activity.estime">
                {{ activity.esmsg }}
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-else>
            <el-empty description="暂无信息"></el-empty>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "usermenu",
  data() {

    return {
      // 用户数据
      expressMsgs: [],

      // 分页数据
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      // 详情信息
      detailMsg:{},
      // 修改的标记
      msgFlag:false,
      // 搜索的条件
      searchMsg: {},
      // 拒绝后生成的售后单信息
      afterSaleMsg:{},


    };
  },
  // 页面初始化方法
  created() {
    this.flushPage()
  },
  methods: {
    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },

    // 弹出全部的信息
    popAllMsg(row){
      this.$http.get("/Express/getAllMsgByid/"+row.eid).then(resp=>{
        this.detailMsg=resp.data.data
        this.msgFlag=true
      })
    },
    // 对话框关闭之后
    handleClose() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
      this.refuseFlag = false
      this.modifyFlag = false
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    // 重置搜索菜单
    restSearch() {
      this.$nextTick(() => {
        this.$refs['searchFrom'].resetFields();
      })
    },
    // 执行搜索方法
    search() {
      this.$http.post("/Express/fuzzy/", this.searchMsg).then(resp => {
        this.expressMsgs = resp.data.data
      })
    },
    // 刷新页面的方法
    flushPage() {
      // 获取全部的快递单信息
      this.$http.get("/Express/list/" + this.pageIndex + "/" + this.pageSize).then(resp => {
        console.log(resp.data.data)
        // 放入用户信息
        this.expressMsgs = resp.data.data.records;
        // 放入分页数据
        this.total = resp.data.data.total
      })
    }
  }
}

</script>

<style scoped>

</style>
